window.addEvent("load",function(){
	
	// Fx.Utils definition - Fx.Opacity and Fx.Height
	Fx.Height = Fx.Style.extend({initialize: function(el, options){$(el).setStyle('overflow', 'hidden');this.parent(el, 'height', options);},toggle: function(){var style = this.element.getStyle('height').toInt();return (style > 0) ? this.start(style, 0) : this.start(0, this.element.scrollHeight);},show: function(){return this.set(this.element.scrollHeight);}});Fx.Opacity = Fx.Style.extend({initialize: function(el, options){this.now = 1;this.parent(el, 'opacity', options);},toggle: function(){return (this.now > 0) ? this.start(1, 0) : this.start(0, 1);},show: function(){return this.set(1);}});
	
	// main loop
	$$(".gk_vm_header").each(function(el, i){
		// handler to main wrapper
		var mainwrap = el;
		// getting main wrapper ID
		var elID = el.getProperty("id");
		// getting shortcut to $Gavick object
		var $G = $Gavick["gk_vm_header-"+elID]; 
		var JSONtab = $G.JSON.data;
		var ItemTab = $ES(".gk_vm_header_item", mainwrap);
		var ImageTab = new Array();
		
		ItemTab.each(function(el, i){
			ImageTab[i] = new Array();
			
			$ES(".gk_vm_header_image", el).each(function(elm, j){
				ImageTab[i][j] = elm;
			});
		});
		
		var TextTab = $ES(".gk_vm_header_text", mainwrap);
		var BgTab = $ES(".gk_vm_header_bg", mainwrap);
		var EffectsTabH = [];		
		var EffectsTabO = [];
				
		BgTab.each(function(e, l){
			e.setStyle("background-color", $G["bgcolor"]);
			if($G["opacity"] != 0) e.setOpacity($G["opacity"]);
			EffectsTabH[l] = new Fx.Style(e,'top',{wait: false, duration: $G['anim_speed']}); 
		});
		
		var page = 0;
		var loading = false;
		var maxHeight = TextTab[0].getSize().size.y;
		var opened = false;
		var timer = false;
		
		TextTab.each(function(elm, j){	
			var content = '';
			content += '<div class="gkvmh_short_desc"><h2>' + JSONtab[page+j].title + '</h2>';
			content += '<p>' + JSONtab[page+j].short_desc + '</p></div>';
			
			elm.innerHTML = content;
			
			if(elm.getSize().size.y > maxHeight) maxHeight = elm.getSize().size.y;
			
			EffectsTabO[j] = new Fx.Opacity(elm, {wait: false, duration: $G['anim_speed']}); 
		});

		TextTab.each(function(elmt, k){
			elmt.setStyle("height",maxHeight+"px");
			elmt.setStyle("top",(ItemTab[0].getSize().size.y - maxHeight)+"px");
			BgTab[k].setStyle("height",ItemTab[0].getSize().size.y+"px");
			BgTab[k].setStyle("top",(ItemTab[0].getSize().size.y - maxHeight)+"px");
		});
		
		ItemTab.each(function(elmnt, z){
			elmnt.addEvent("mouseenter",function(){
				if(!loading){
					opened = true;
					EffectsTabH[z].start(0);
					EffectsTabO[z].start(0);
					(function(){
						TextTab[z].setStyle("top", "0px");
						if(JSONtab[page+z]) TextTab[z].innerHTML = '<div class="gkvmh_long_desc"><h2>' + JSONtab[page+z].title + '</h2><p>' + JSONtab[page+z].long_desc + '</p><p class="gk_price">' + JSONtab[page+z].price + '</p><p><a class="readon" href="' + JSONtab[page+z].link + '">詳細情報 &raquo;</a></p></div>';
						EffectsTabO[z].start(1);
					}).delay(200);
				}
			});
			
			elmnt.addEvent("mouseleave",function(){
				if(!loading){
					EffectsTabO[z].start(0);
					(function(){
						TextTab[z].setStyle("top", (ItemTab[0].getSize().size.y - maxHeight)+"px");
						if(JSONtab[page+z]) TextTab[z].innerHTML = '<div class="gkvmh_short_desc"><h2>' + JSONtab[page+z].title + '</h2><p>' + JSONtab[page+z].short_desc + '</p></div>';
						EffectsTabH[z].start(elmnt.getSize().size.y - maxHeight);
						EffectsTabO[z].start(1);
					}).delay($G['anim_speed']);
				
					if(opened){
						opened = false;
						if($G['total'] > BgTab.length){
							$clear(timer);
							timer = (function(){
								if(!opened){
									loading = true;
									page  = (JSONtab.length / BgTab.length > page) ? page + BgTab.length : 0;
									load_images_tab(BgTab, TextTab, ItemTab, ImageTab, JSONtab, EffectsTabO, page, $G);
									(function(){loading = false;}).delay($G['anim_speed']*2);
								}else $clear(timer);
							}).periodical($G['anim_interval']);
						}
					}
				}
			});
		});
		
		if($G['total'] > BgTab.length){
			$clear(timer);
			timer = (function(){
				if(!opened){
					loading = true;
					page  = (JSONtab.length / BgTab.length > page) ? page + BgTab.length : 0;
					load_images_tab(BgTab, TextTab, ItemTab, ImageTab, JSONtab, EffectsTabO, page, $G);
					(function(){loading = false;}).delay($G['anim_speed']*2);
				}else $clear(timer);
			}).periodical($G['anim_interval']);
		}
	});
});

function load_images_tab(BgTab, TextTab, ItemTab, ImageTab, JSONtab, EffectsTabO, page, $G){		
	maxHeight = TextTab[0].getSize().size.y;
		
	ImageTab.each(function(elm, j){
		var ind = page/ItemTab.length;
		var ind2 = 0;
		  
		(function(){
			if(page == 0){
				ind2 = ImageTab[0].length;
				if(elm[ind2]) new Fx.Opacity(elm[ind2],{duration: $G['anim_speed']}).start(0);
				if(elm[0]) new Fx.Opacity(elm[0],{duration: $G['anim_speed']}).start(1);
			}else{
				if(elm[ind-1]) new Fx.Opacity(elm[ind-1],{duration: $G['anim_speed']}).start(0);
				if(elm[ind]) new Fx.Opacity(elm[ind],{duration: $G['anim_speed']}).start(1);
			}
		}).delay($G['anim_speed']+$G['anim_speed']*j);
	});
			
	TextTab.each(function(elm, j){	
		EffectsTabO[j].start(0);
		(function(){
			var content = '';
			if(JSONtab[page+j]){
				content += '<div class="gkvmh_short_desc"><h2>' + JSONtab[page+j].title + '</h2>';
				content += '<p>' + JSONtab[page+j].short_desc + '</p></div>';
			}	
			elm.innerHTML = content;			
			if(elm.getSize().size.y > maxHeight) maxHeight = elm.getSize().size.y;
			EffectsTabO[j].start(1);
		}).delay($G['anim_speed']+$G['anim_speed']*j)
	});

	TextTab.each(function(elmt, k){
		elmt.setStyle("height",maxHeight+"px");
		elmt.setStyle("top",(ItemTab[0].getSize().size.y - maxHeight)+"px");
		BgTab[k].setStyle("height",ItemTab[0].getSize().size.y+"px");
		BgTab[k].setStyle("top",(ItemTab[0].getSize().size.y - maxHeight)+"px");
	});
}